import React, { Component, CSSProperties } from "react";
import { Animated } from "react-native";
import Value = Animated.Value;

export default class FadeInView extends Component<{
    style: CSSProperties
}, {
    fadeAnim: Value
}> {
    state = {
        fadeAnim: new Animated.Value(0) // 透明度初始值设为 0
    };

    componentDidMount() {
        Animated.timing( // 随时间变化而执行的动画类型
            this.state.fadeAnim,
            {
                toValue: 1 // 透明度最终变为 1， 即完全不透明
            }
        ).start()
    }

    render() {
        return (
            <Animated.View                            // 可动画化的视图组件
                style={{
                    ...this.props.style,
                    opacity: this.state.fadeAnim,          // 将透明度指定为动画变量值
                }}
            >
                {this.props.children}
            </Animated.View>
        );
    }
}